<!-- 组件使用：
	<scroll-tab class="scroll-tab" :tabData="tabData" @tabMsg="tabMsg"></scroll-tab>
	
	import { scrollTab } from '@/components/pageComponents/sp-order/scroll-tab';
	
	data() {
		return {
			tabData: [{
				name: '全部',
				value: ''
			}, {
				name: '待付款',
				value: 'WAITING'
			}, {
				name: '进行中',
				value: 'UNDERWAY'
			}, {
				name: '已完成',
				value: 'FINISH'
			}, {
				name: '已取消',
				value: 'CANCEL'
			}],
		};
	},
	methods: {
		tabMsg(val){
			console.log('tabMsg',val)
		}
	}
-->
<template>
	<scroll-view class="scroll-view" scroll-x="true" @scroll="scroll" scroll-left="0">
		<view v-for="(item, index) in tabData" :key="index"
			:style="{ backgroundColor: active === index ? themeColor : '#ffffff', color: active === index ? '#ffffff' : '' }"
			@click="handleTab(item,index)" class="scroll-view-item">
			{{ item.name }}
		</view>
	</scroll-view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState('sp-common/base', ['themeColor'])
		},
		props: ['tabData'],
		data() {
			return {
				active: 0
			};
		},
		methods: {
			scroll: function(e) {
				// console.log(e);
			},
			handleTab(val,index) {
				this.active = index;
				this.$emit('tabMsg', val);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.scroll-view {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		display: inline-block;
		min-width: 110rpx;
		height: 56rpx;
		border-radius: 56rpx;
		font-size: 29rpx;
		line-height: 56rpx;
		text-align: center;
		font-weight: 500;
		padding: 8rpx 27rpx;
		margin-left: 26rpx;
	}

	.scroll-view-item:nth-of-type(1) {
		margin-left: 21rpx;
	}

	.scroll-view-item:nth-last-of-type(1) {
		margin-right: 21rpx;
	}
</style>
